<template>
  <a-drawer
    v-bind="$attrs"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    :destroy-on-close="true"
    size="large"
    @after-visible-change="onAfterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="props.loading">
      <a-descriptions bordered :column="1" size="middle" :label-style="{ width: '180px' }">
        <a-descriptions-item label="名称">{{ props.current.name }}</a-descriptions-item>
        <a-descriptions-item label="作用域">{{ props.current.scope }}</a-descriptions-item>
        <a-descriptions-item label="认证类型">{{ props.current.authorizedGrantTypes }}</a-descriptions-item>
        <a-descriptions-item label="回调地址">{{ props.current.registeredRedirectUris }}</a-descriptions-item>
        <a-descriptions-item label="权限集合">{{ props.current.authorities }}</a-descriptions-item>
        <a-descriptions-item label="token时间(秒)">{{ props.current.accessTokenValiditySeconds }}</a-descriptions-item>
        <a-descriptions-item label="刷新token时间(秒)">
          {{ props.current.refreshTokenValiditySeconds }}
        </a-descriptions-item>
        <a-descriptions-item label="启用状态">{{ props.current.enable ? '正常' : '关闭' }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ props.current.description }}</a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-drawer>
</template>

<script setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  current: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const onAfterVisibleChange = (visible) => {
  if (props.loading) {
    emits('update:loading', false)
  }
}

const emits = defineEmits(['update:visible', 'update:loading'])

const onClose = () => {
  emits('update:visible', false)
}
</script>
